<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body center>

<style>
    a {margin: 10px;}
</style>

<!----------------------------------------------------------------------------------------->

<a class="btn alert">alert</a>
<a class="btn confirm">confirm</a>
<a class="btn prompt">prompt</a>

<!----------------------------------------------------------------------------------------->

<script>
    $('.alert').click(function(){
        alert('Just a simple confirmation')
    })
    $('.confirm').click(function(){
        confirm('Are you sure you want to proceed').then(result => {
            if(result){
                console.log('confirm')
            }else{
                console.log('cancel')
            }
        })
    })
    $('.prompt').click(function(){
        prompt("Please enter your name", "default").then(value => {
            if(value !== null){
                console.log(value)
            } else {
                console.log("cancel")
            }
        })
    })
</script>

</body>
</html>